<template>
  <div class="face-recognition">
    <el-container>
      <el-header>
        <div class="header-content">
          <h1>人脸识别系统</h1>
        </div>
      </el-header>
      
      <el-main>
        <div class="recognition-content">
          <el-card class="recognition-card">
            <template #header>
              <div class="card-header">
                <el-icon class="header-icon"><Camera /></el-icon>
                <span>人脸识别</span>
                <p class="card-subtitle">拍摄人脸照片，自动完成登录注册</p>
              </div>
            </template>
            
            <div v-if="!recognitionResult">
              <!-- 人脸拍摄区域 -->
              <CameraCapture
                @photo-confirmed="handlePhotoConfirmed"
                :width="480"
                :height="360"
              />
              
              <!-- 识别按钮 -->
              <div class="recognition-actions" v-if="hasPhoto">
                <el-button
                  type="primary"
                  size="large"
                  @click="handleRecognition"
                  :loading="recognizing"
                  class="recognition-btn"
                >
                  <el-icon><Cpu /></el-icon>
                  开始人脸识别
                </el-button>
              </div>
            </div>
            
            <!-- 识别结果显示 -->
            <div v-else class="result-section">
              <el-result
                :icon="recognitionResult.success ? 'success' : 'error'"
                :title="getResultTitle()"
                :sub-title="recognitionResult.message"
              >
                <template #extra>
                  <div v-if="recognitionResult.success && recognitionResult.data" class="user-info">
                    <el-descriptions :title="getDescriptionTitle()" :column="2" border>
                      <el-descriptions-item label="人脸ID">{{ recognitionResult.data.faceId }}</el-descriptions-item>
                      <el-descriptions-item label="操作时间">{{ recognitionResult.data.actionTime }}</el-descriptions-item>
                      <el-descriptions-item label="相似度">
                        {{ (recognitionResult.data.similarity * 100).toFixed(2) }}%
                      </el-descriptions-item>
                      <el-descriptions-item label="操作类型">
                        <el-tag :type="recognitionResult.data.action === 'register' ? 'success' : 'primary'">
                          {{ recognitionResult.data.action === 'register' ? '新用户注册' : '用户登录' }}
                        </el-tag>
                      </el-descriptions-item>
                      <el-descriptions-item v-if="recognitionResult.data.imagePath" label="人脸图片" span="2">
                        <el-link :href="recognitionResult.data.imagePath" target="_blank" type="primary">
                          查看已保存的人脸图片
                        </el-link>
                      </el-descriptions-item>
                    </el-descriptions>
                  </div>
                  
                  <div class="result-actions">
                    <el-button type="primary" @click="resetRecognition" size="large">
                      继续识别
                    </el-button>
                  </div>
                </template>
              </el-result>
            </div>
          </el-card>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from 'vue'

import { Camera, Cpu } from '@element-plus/icons-vue'
import CameraCapture from '../../components/CameraCapture.vue'
import { faceRecognition } from '../../api/face.js'

const hasPhoto = ref(false)
const photoFile = ref(null)
const recognizing = ref(false)
const recognitionResult = ref(null)

const handlePhotoConfirmed = (blob) => {
  photoFile.value = blob
  hasPhoto.value = true
}

const handleRecognition = async () => {
  if (!photoFile.value) {
    return
  }
  
  recognizing.value = true
  
  try {
    const formData = new FormData()
    formData.append('faceImage', photoFile.value, 'face.jpg')
    
    const response = await faceRecognition(formData)
    
    recognitionResult.value = {
      success: true,
      message: response.msg || '识别成功',
      data: response.data
    }
    
    const actionText = response.data.action === 'register' ? '注册' : '登录'
    const welcomeMsg = response.data.action === 'register' ? 
      `欢迎新用户！您的人脸ID：${response.data.faceId}` : 
      `欢迎回来！人脸ID：${response.data.faceId}`
    

    
  } catch (error) {
    console.error('Recognition error:', error)
    
    recognitionResult.value = {
      success: false,
      message: error.message || '人脸识别失败'
    }
  } finally {
    recognizing.value = false
  }
}

const resetRecognition = () => {
  recognitionResult.value = null
  hasPhoto.value = false
  photoFile.value = null
}

const getResultTitle = () => {
  if (!recognitionResult.value.success) return '识别失败'
  
  const action = recognitionResult.value.data?.action
  return action === 'register' ? '注册成功' : '登录成功'
}

const getDescriptionTitle = () => {
  const action = recognitionResult.value.data?.action
  return action === 'register' ? '新用户信息' : '用户信息'
}
</script>

<style scoped>
.face-recognition {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.header-content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.el-header {
  background-color: rgba(255, 255, 255, 0.95);
  color: #333;
  line-height: 60px;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0 20px;
}

.el-main {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: calc(100vh - 60px);
  padding-top: 30px;
}

.recognition-content {
  width: 100%;
  max-width: 700px;
}

.recognition-card {
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.card-subtitle {
  margin: 10px 0 0 0;
  font-size: 14px;
  font-weight: 400;
  color: #666;
}

.header-icon {
  margin-bottom: 10px;
  font-size: 28px;
  color: #6366f1;
}

.recognition-actions {
  margin-top: 30px;
  text-align: center;
}

.recognition-btn {
  width: 100%;
  max-width: 300px;
  border-radius: 25px;
  padding: 15px 0;
  font-size: 16px;
  font-weight: 600;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
}

.recognition-btn:hover {
  background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
}

.result-section {
  padding: 20px 0;
}

.user-info {
  margin: 20px 0;
}

.result-actions {
  margin-top: 20px;
  text-align: center;
}

.result-actions .el-button {
  border-radius: 20px;
  padding: 12px 30px;
  font-size: 16px;
}

h1 {
  color: #333;
  margin: 0;
  font-weight: 600;
  font-size: 24px;
}

:deep(.el-descriptions__label) {
  font-weight: 600;
}

:deep(.el-result__title) {
  font-size: 24px;
}

:deep(.el-result__subtitle) {
  font-size: 16px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .recognition-content {
    margin: 0 15px;
  }
  
  .card-header {
    font-size: 18px;
  }
  
  h1 {
    font-size: 20px;
  }
}
</style>
